<script lang="ts" setup>
import { Codemirror } from 'vue-codemirror'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  tabSize: {
    type: Number,
    default: 2,
  },
  autoDestroy: {
    type: Boolean,
    default: true,
  },
  indentWithTab: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(['update:modelValue'])

const { modelValue } = toRefs(props)

const value = ref('')
watch(modelValue, () => {
  value.value = modelValue.value
})

onMounted(() => {
  value.value = modelValue.value
})

function handleChange() {
  emit('update:modelValue', value.value)
}
</script>

<template>
  <Codemirror
    v-model="value"
    :style="{ height: '100%', width: '100%' }"
    :indent-with-tab="indentWithTab"
    :auto-destroy="autoDestroy"
    :tab-size="tabSize"
    :disabled="disabled"
    @change="handleChange"
  />
</template>

<style scoped></style>
